/**
 * Copyright(c) 2006-2008, FeyaSoft Inc.
 */
package("feyaSoft.demouser");

/**
 * This JS is mainly used to list demouser actions
 * It is under sub-menu tutorial.
 *
 * @author fzhuang
 * @Date Oct 6, 2007
 */
feyaSoft.demouser.ListDemouser = function(app, src) {

   Ext.QuickTips.init();
   
   // fix the bug in codepress - resize
   Ext.BoxComponent.prototype.setSize('100%','25px');

   /************************************************************
	* Display the result in page
    * the column model has information about grid columns
    * dataIndex maps the column to the specific data field in
    * the data store (created below)
    ************************************************************/
    var userCM = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        {
           id: 'id',
           header: "Identify",
           dataIndex: 'id',
           width: 150,
           hidden: true
        },{
            header: "Username", 
            width: 100, 
            dataIndex: 'username'
        },{
            header: "Last Name", 
            width: 100, 
            dataIndex: 'lastname'
        },{
            header: "First Name", 
            width: 100, 
            dataIndex: 'firstname'
        }
    ]);   
	    
   /************************************************************
    * connect to backend - grid - core part
    * create the Data Store
    *   connect with backend and list the result in page
    *   through JSON format
    ************************************************************/    
    var dataStore = new Ext.data.Store({
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.HttpProxy({
           url: 'demouser/listDemouser.htm?action=listResult'
        }),
        
        // create reader that reads the Topic records
        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'totalCount',
            id: 'id'
        }, [
            {name: 'id'},
            {name: 'username'},
            {name: 'lastname'},
            {name: 'firstname'},
            {name: 'password'}
        ])
    });
	// trigger the data store load
	dataStore.load();	

   /************************************************************
    * add a paging toolbar to the grid's footer 
    ************************************************************/  
    var myPagingToolbar = new Ext.PagingToolbar({
        pageSize: 10,
        displayInfo: true,
        displayMsg: 'total {2} results found. Current shows {0} - {1}',
        emptyMsg: "not result to display",
        store: dataStore
    });
       	    
   /************************************************************
    * Define menubar now in here
    *   add and delete functions
    ************************************************************/     
    var menubar = [{
        text:'Add User',
        tooltip:'Add a new user',
        iconCls:'addItem',
        handler: function(){
            // add new user now - action
            feyaSoft.demouser.CreateDemouser(dataStore);
        }
    },'-',{
        text:'Delete User(s)',
        tooltip:'Remove the selected items',
        iconCls:'remove',
        handler: function(){
            // delete user now - action
            feyaSoft.demouser.DeleteDemouser(dataStore, gridPanel);
        }
    }];
    
   /************************************************************
    * define grid panel now
    ************************************************************/  
    var gridPanel = new Ext.grid.GridPanel({
        border:false,	                        
        ds: dataStore,
        cm: userCM,	
        viewConfig: {forceFit:true},	                        
        tbar: menubar,
        bbar: myPagingToolbar
    });

    // pre-define parameters
    var desktop = app.getDesktop();
    var win = desktop.getWindow('listDemouser');

   /************************************************************
    * create a new window now
    ************************************************************/     
    if (!win) {
        win = desktop.createWindow({
            id: 'listDemouser',
            title:'Ext grid form dialog Demo',
            width:700,
            height:400,
            x:100,
            y:30,
            iconCls: 'demo',
            shim:false,
            animCollapse:false,
            constrainHeader:true,

            layout: 'fit',
            items: gridPanel

        });	            
    }
    win.show();     
    
   /************************************************************
    * Action - edit
    *   handle double click 
    *   user select one of the item and want to update it
    ************************************************************/
    gridPanel.on('rowdblclick', function(gridPanel, rowIndex, e) {
	    var selectedId = dataStore.data.items[rowIndex].id;  
	    new feyaSoft.demouser.EditDemouser(dataStore, selectedId);  
	}); 	        

};